const colorList = [
  "#1890FF",
  "#2FC25A",
  "#FACC14",
  "#233273",
  "#8544E0",
  "#14C2C3",
  "#3436C7",
  "#F04764",
];
let mychart = echarts.init(document.querySelector("#box"));
let mylistchart = echarts.init(document.querySelector("#boxZ"));
const numToMoneyField = (num) => {
  if (!(typeof num === "number")) return "error:格式有误";
  return num.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
};
mychart.on("click", (params) => {
  console.log(params);
});
// 注册 mouseover 事件，类目轴名称切换为自定义颜色
mylistchart.on("click", (params) => {
  console.log(params);
  mylistchart.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
  });
  mylistchart.dispatchAction({
    type: "highlight",
    dataIndex: params.dataIndex,
  });
  mychart.dispatchAction({
    type: "highlight",
    name: params.name,
  });
  if (params.componentType == "series") {
  }
});
mylistchart.on("mousemove", (params) => {
  // mylistchart.dispatchAction({
  //   type: "highlight",
  //   seriesIndex: 0,
  // });
  mychart.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
  });
  if (params.componentType == "series") {
  }
});
// // 注册 mouseout 事件，类目轴名称恢复默认颜色.与上述mouseover移入时的处理方式一样就不写详细注释了
mylistchart.on("mouseout", (params) => {
  console.log(params.name);
  mylistchart.dispatchAction({
    type: "downplay",
    name: params.name,
  });
});

const listData = [
  { value: 55590, value2: 96545, name: "长虹空调" },
  { value: 45595, value2: 96545, name: "多媒体" },
  { value: 45591, value2: 96545, name: "长虹激光" },
  { value: 35590, value2: 96545, name: "中山长虹" },
  { value: 25590, value2: 96545, name: "广东长虹" },
  { value: 15595, value2: 96545, name: "长虹美菱" },
  { value: 15590, value2: 96545, name: "宏远迪能" },
  { value: 9559, value2: 96545, name: "合肥实业" },
  { value: 8559, value2: 96545, name: "长虹日电" },
];
const listDataArr = (dataListArr, type) => {
  if (type) {
    let arr = [];
    for (let index = 0; index < dataListArr.length; index++) {
      arr.push(dataListArr[index][type]);
    }
    return arr;
  }
};
//指定柱状配置项和数据
let ListOption = {
  title: {
    text: "采购规模总览累计同比",
    left: "33%",
    top: "5%",
    textStyle: {
      fontSize: 25,
      fontWeight: "bolder",
    },
  },
  color: ["#1890FF", "#FACC14"],
  legend: {
    data: ["上年度累计", "本年度累计"],
    top: "15%",
    left: 20,
    icon: "circle",
    itemGap: 20,
    textStyle: {
      fontSize: 16,
      color: "#999",
    },
  },

  grid: {
    top: "30%",
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true, //坐标轴区域是否包含刻度标签
  },
  tooltip: {
    trigger: "item", //类目'axis' 数据项'item'
    axisPointer: {
      type: "shadow",
    },
  },
  xAxis: [
    {
      type: "category",
      data: listDataArr(listData, "name"),
      axisTick: {
        alignWithLabel: true, //刻度轴和柱体对其
      },
      axisLabel: {
        //x轴刻度标签文字文本
        formatter: function (value, index) {
          // console.log(value, index);
          return `${value}`;
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        lineStyle: {
          type: [10, 10],
          dashOffset: 10,
        },
      },
    },
  ],

  series: [
    {
      name: "上年度累计",
      type: "bar",
      barWidth: "10%",
      barCategoryGap: "50%",
      barGap: 1, //柱子的间距
      data: listDataArr(listData, "value"),
      itemStyle: {
        borderRadius: [4, 4, 0, 0], //柱条圆角（顺时针左上，右上，右下，左下）
      },
      tooltip: {
        textStyle: {
          fontSize: 16,
        },
      },
      emphasis: {
        focus: "self",
        // disabled: true,
        blurScope: "global",
      },
    },
    // {
    //   name: "本年度累计",
    //   type: "bar",
    //   barWidth: "10%",
    //   // barGap: "50%",
    //   data: listDataArr(listData, "value2"),
    //   itemStyle: {
    //     borderRadius: [4, 4, 0, 0], //柱条圆角（顺时针左上，右上，右下，左下）
    //   },
    // },
  ],
};

// 指定饼状图表的配置项和数据
let option = {
  title: [
    {
      text: "本年度当期累计规模占比",
      left: "25%",
      top: 10,
      textStyle: {
        fontSize: 20,
        fontWeight: "bolder",
      },
    },
    {
      text: `{name|总金额}\n{val|${numToMoneyField(1608398)}}`,
      top: "50%",
      left: "center",
      textStyle: {
        rich: {
          name: {
            fontSize: 20,
            color: "#666666",
            padding: [10, 0],
          },
          val: {
            fontSize: 25,
            fontWeight: "bold",
            color: "#333333",
          },
        },
      },
    },
  ],
  color: [...colorList],
  tooltip: {},
  legend: {
    show: false,
  },
  series: [
    {
      type: "pie",
      colorBy: "data",
      avoidLabelOverlap: true, //避免标签重叠
      center: ["50%", "60%"], //设置圆图的位置
      radius: ["45%", "60%"],
      startAngle: 0, //起始角度
      label: {
        position: "outside",
        marigin: 20,
        fontSize: 16,
        bleedMargin: 5, //文字出血
        alignTo: "labelLine",
        formatter: (item) => {
          //接收一个参数
          // console.log(item);
          return `{name|${item.name}} \n{hr|}\n{num|${
            item.value
          }   ${item.percent.toFixed(0)}%}  `;
        },
        rich: {
          name: {
            fontSize: 14,
            width: "100%",
            padding: [-10, 0, -10, 0],
          },
          num: {
            width: "100%",
            align: "center",
            fontSize: 12,
            color: "rgba(120, 116, 116, 1)",
            padding: [0, 0, 0, 0],
          },
          hr: {
            backgroundColor: "rgba(120, 116, 116, 1)",
            lineHeight: 1,
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, -3, 0, -6],
          },
        },
      },
      labelLine: {
        lineStyle: {
          color: "rgba(120, 116, 116, 1)",
          width: 2,
        },
        length: 20,
        length2: 35,
        smooth: 0.1,
        minTurnAngle: 90,
        maxSurfaceAngle: 89,
      },
      labelLayout(params) {
        // console.log(params);
        return {
          // width: 70,
          // moveOverlap: "shiftY",'shiftX'
          // moveOverlap: "shiftY",
          // verticalAlign: "middle",
          // x:"20%"
          // y: params.rect.y - 70,
        };
      },
      itemStyle: {
        borderWidth: 3,
        join: "miter",
        cap: "round",
        borderColor: "rgba(255, 255, 255, 1)",
      },
      emphasis: {
        focus: "self",
        blurScope: "global",
      },
      data: [
        { value: 50, name: "长虹空调" },
        { value: 45, name: "多媒体" },
        { value: 41, name: "长虹激光" },
        { value: 30, name: "中山长虹" },

        { value: 20, name: "广东长虹" },
        { value: 15, name: "长虹美菱" },
        { value: 10, name: "宏远迪能" },
        { value: 9, name: "合肥实业" },
        { value: 8, name: "长虹日电" },
      ],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
mychart.setOption(option);
mylistchart.setOption(ListOption);
